p Web Site Design Principles 


When you complete this 
chapter, you will be able 
to: 


e State the principles of 
design for the computer 
medium 


e Develop a unified look for 
a Web site 


e Understand the importance 
of active white space 


e Focus your design on 
the user 


e Evaluate Web sites using 
screen-oriented design 
principles 


This chapter covers the basic design principles that you will apply as you work 
through this book. By examining a variety of Web sites, you will learn to focus on 
both the user's needs and the information requirements of the content you want 


to deliver, while planning a site that is easy to navigate and quick to download. 


The sample Web pages in this chapter come from a wide range of sites. 
The Web is so far-reaching in content and design that no collection of pages 
represents what is typical. Most of the samples illustrate good design princi- 
ples, although some highlight design defects as well. In truth, almost every site 
has one flaw or another—whether it be confusing accessibility, over-ambitious 
design, or poor download time. Judge the samples with a critical eye. Look for 
elements of design that you can transfer to your own work. As you progress 
through the book, you will practice and apply these principles to your own Web 


design efforts. 
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DESIGN FOR THE MEDIUM 


When designing a Web site, remember the destination is a computer, not the 
printed page, and the language is hypertext, not linear text. As a Web page 
designer, you must create Web pages specifically for the computer screen. You 
must consider the layout, fonts, and colors and how they will appear. As an 
HTML author, you must consider the nonlinear nature of hypertext, and weave 
the appropriate links and associations into the information. Give users the 
options to follow the information path they desire by providing appropriate 
links to related topics. Make them feel comfortable at your site by letting them 
know where they are and where they can go. 


CRAFT THE LOOK AND FEEL 

The interface that the user must navigate often is called the look and feel of a 
Web site. Users look and feel when they explore the information design of your 
site. They read text, make associations with links, view graphics, and, depend- 
ing on the freedom of your design, create their own path through your infor- 
mation. The look and feel is both the way your Web site works and the person- 
ality it conveys to the user. Not only should you plan for a deliberate look and 
feel, but you must test your design against the variable nature of the Web. You 
want to ensure that the greatest number of users can navigate your site reliably. 


MAKE YOUR DESIGN PORTABLE 

To be successful, your Web site design must be portable and accessible across 
different browsers, operating systems, and computer platforms. Many designers 
make the mistake of testing in only one environment, assuming that their pages 
look the same to all of their users. No matter how much Web design experience 
you gain, always remember to test even when you feel confident of your results. 
Figures 2-1 and 2-2 show the same page displayed in Internet Explorer 5.0 and 
Netscape Navigator 4.0. The page is coded with standard Cascading Style Sheets 
code that Netscape cannot interpret, so the design does not appear as the 
designer intended. 
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FIGURE 2-1 


Cascading Style Sheets 
in Internet Explorer 5.0 
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FIGURE 2-2 


Cascading 
Style Sheets in 
Netscape Navigator 4.0 
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FIGURE 2-3 


Burpee Web site 
main page 


You can avoid this problem by making your design portable. Viewing your 
pages in the browsers your users are likely to have, using popular operating 
systems, and checking the site on more than one computer platform ensure 
your site will be accessible to the greatest number of users. 


DESIGN FOR LOW BANDWIDTH 
Plan your pages so that they are accessible at a variety of connection speeds. 
If your pages download slowly because they contain large, detailed graphics or 
complicated animations, your users will leave before they ever see your con- 
tent. As you learned in Chapter 1, it will be a few more years before the major- 
ity of your users have a consistent, high-speed connection to the Web. Until 
that time, consider users with a lower bandwidth when you design the look 
and feel of your site. 

The Burpee Web site main page, illustrated in Figure 2-3, contains seven 
separate images. 
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The images on this page total 103 Kb. Users who connect to the Web with 
a modem have a long wait before the images download. Figure 2-4 shows the 
Burpee page before the images have downloaded. 
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FIGURE 2-4 3 Burpee Gardens Vegetable and Flower Seeds - Netscape -of x] 
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The designers have made an attempt to accommodate users who have 
slower connections by providing minimal navigation cues in the alternate text 
for the images. (You will learn more about alternate text in the discussion of 
ALT attributes in Chapter 4.) A better option would have been to design a page 
that is less graphics-intensive so it would download quickly for all users, rather 
than only for those with faster connections. 


PLAN FOR CLEAR PRESENTATION AND EASY ACCESS TO YOUR INFORMATION 
Your information design—the presentation and organization of your information— 
is the single most important factor in determining the success of your site. 
Your graphics and navigation options—the look and feel of your site—must 
present a variety of options to the user without detracting from their quest for 
information. A visitor to your site may choose to browse randomly or look for 
specific information. Often users arrive at a page looking for information 
included low in the hierarchy of information. Sometimes users arrive at your 
site seeking a specific piece of information, such as a telephone number or 
order form.Anticipate and plan for the actions and paths that users may choose 
when they traverse your site. Provide direct links to the areas of your site that 
you feel will be most in demand. 

Present your information so it is easy to read. Many Web sites fail this crite- 
ria by using too many fonts, colors, and lengthy passages of text. The computer 
display is a poor reading medium. The low resolution degrades legibility. The 
light source coming from behind the text tires the eye. Think about providing 
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contrasting colors that are easy to read and easy on the eye, such as dark colors 
against a light or white background. 

Break text into reasonable segments that make for easier on-screen reading. 
Keep in mind that readers have different habits when reading online. They scan 
more and read less, skimming long pages quickly as they scroll through the 
text. Include plenty of headings so users can find content quickly. Control the 
horizontal length of your text to provide complete, easy-to-read columns. Keep 
the seven plus or minus two rule of information design in mind; that is, users 
cannot comprehend more than seven plus or minus two steps or segments of 
information at one time. For example, a well-written procedure would contain 
no more than nine steps. Rather than presenting endlessly scrolling pages, break 
information into smaller chunks and link them with hypertext. 


DESIGN THE WHOLE SITE 


FIGURE 2-5 


NASA Web site 
main page 


When designing your site, plan the unifying themes and structure that will hold 
the pages together. Your choices of colors, fonts, graphics, and page layout 
should communicate a visual theme to the user that orients them to your site’s 
content.The theme should reflect the impression that you or your organization 
want to convey. For example, Figure 2-5 shows the NASA Web site main page. 
The text-based page presents a sober image, and indeed, the content provides 
serious scientific information. 
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FIGURE 2-6 


NASA Web site 
for children 
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The use of subdued colors, familiar, business-oriented fonts, and structured, 
linear columns underscores the content and emphasizes the scientific theme. 
NASA also maintains a Web site for children, as illustrated in Figure 2-6. 
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Where the site for adults communicates a serious impression, the site for 
children combines bright colors, an open, friendly font, a dynamic structure, 
and simple, appealing graphics to present a livelier, more playful theme. 

When you design the whole site, you must consider more than each indi- 
vidual page. For a well-integrated site, create smooth transitions, use a grid to 
provide visual structure, and use active white space. 


CREATE SMOOTH TRANSITIONS 
Plan to create a unified look among the sections and pages of your site. 
Reinforce the identifying elements of the site and create smooth transitions 
from one page to another by repeating colors and fonts and by using a page 
layout that allows different hierarchical levels. Avoid random, jarring changes 
in your format, unless this is the effect you want to achieve. Consistency creates 
smooth transitions from one page to the next, reassures viewers that they are 
traveling within the boundaries of your site, and helps them find information. 
Think of users turning the pages of a periodical when they browse from 
Web page to Web page. Although each page should be a complete entity, it also 
is a part of the whole site. The overall design of a page at any information level 
should reflect the identity of the site. For example, Figures 2-7 and 2-8 show the 
main page and a secondary level page from the United Parcel Service Web site. 
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FIGURE 2-7 


UPS Web site 
main page 


FIGURE 2-8 


UPS Web site 
secondary page 
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These pages share the same color scheme, navigation icons, and identifying 
graphics, which create a smooth transition from the main page to the sec- 
ondary page, and develop a unified look and feel for the Web site. 


FIGURE 2-9 


Areas of active and 
passive white space 


ctive white 


A 
space 


Web Site Design Principles // 33 


USE A GRID TO PROVIDE VISUAL STRUCTURE 


The structure of a Web page is imposed by the grid or page template you 
choose for your page design. The grid is a conceptual layout device that 
organizes the page into columns and rows. You can impose a grid to provide 
visual consistency throughout your site. You can use the grid to enforce 
structure, but you also can break out of the grid to provide variety and high- 


light important information. 


HTML authors use the HTML table elements to build the grid for their 
pages. Although originally designed for tabular data, the table elements were 
used by designers as a tool for building the type of columnar grid structure they 
were accustomed to using in traditional print media. Most well-designed sites 
use tables in one form or another to provide structure and consistency to their 
pages. With table borders turned off, the user cannot tell the layout is held 


together by a table. What they see is a coherent, well-structured page. 


USE OF ACTIVE WHITE SPACE 


White spaces are the blank areas of a page. Use white space deliberately in your 
design, rather than as an afterthought. Good use of white space guides the reader 
and defines the areas of your page. White space that is used deliberately is 
called active white space. Active white space is an integral part of your design 
that structures and separates content. Sometimes the strongest part of a design 
is the active white space. Passive white spaces are blank areas that border the 
screen or are the result of mismatched shapes. Figure 2-9 illustrates active ver- 


sus passive space. 
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FIGURE 2-10 
More white space 
would diminish 
the clutter 


Content presentation can become confused when designers do not use 
enough active white space to separate and define content. The America Online 
Web site illustrated in Figure 2-10 would be easier to scan if it used more active 
white space between the content areas. 


X“ Welcome to AOL.COM - Netscape |. {Of x] 
File Edit View Go Communicator Help 
z| Back Forward Reload Home Search Netscape Print Security Stop, JN | 


wl Bookmarks A Location: [http://www aol.com? v| Ga” What's Related 


AOL.COM nefin centers | News | Shopping | Community 


Find a New Job: 


Daily Essentials 50% OFF GID- 
- Top News - AOL NetMail 300KS Bu BuyMusic 
- Weather + Join a Chat mE com Banta 


é. Horoscopes + Stock Portfolio 


iS 2* Sports Scores 
S- Downloads 
C l eS 
fe omics Gol 
- Travel Bargains Symbol Lookup 


SA My News: Kosovo Rebels Pose Problern | Gore Seeks ‘Fundamental Strengths' 


AD Web Centers ro) Shortcuts @ Shopping eS Community 

- Autos - Try AOL Now! Featured Today: | AOL Instant 

- Business & 1-600-FLOWERS | Messenger v2.0 
Careers -Austin Powers | Sports Superstore |- Register now! 


Ey BE Document: Done 


A lack of active white space creates the impression that a page contains too 
much information, and it is difficult to find the piece of information you want. 
In contrast, the Adobe Web page in Figure 2-11 has generous amounts of active 
white space, making it much easier to read. Plenty of active white space reduces 
clutter and clarifies the organization of your ideas. 

Provide grounding for the user by placing navigation elements in the same 
position on each page. Users will orient themselves quickly to your navigation 
structure. Use the same navigation graphics throughout the site to provide con- 
sistency and reuse graphics stored in the cache. 

Apply some of these principles to two mainstream Web sites. Figures 2-12 
and 2-13, illustrating the National Gallery of Art (NGA) Web site, demonstrate a 
smooth transition between pages. 
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The main page and secondary page share a number of characteristics: 
e Consistent background graphics 
e Consistent placement of navigation information 
e Vertical rule that provides structure 
e Consistent font usage 
e Logo that brands the site 
e Generous areas of active white space 

The continuity between these pages enforces the feeling of a whole piece 
of work. The understated fonts and colors and the quiet background graphics 
provide an appropriate museum-like impression. One design rule to note—the 
logo should remain in the same place on all pages for consistency. Users may 
otherwise look for reasons the logo has moved, which distracts them from your 
message. 

The Adobe Web site, illustrated in Figures 2-14 and 2-15, has a much 
different look but still applies the same principles. Adobe is a creator of 
design software—their audience probably is sensitive to visual design. 
Because of this, their site must be visually appealing, adhere to graphic 
design rules, and present accessible information. 


Web Site Design Principles // 31 
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FIGURE 2-15 3 Adobe Tips and Techniques - Netscape |. {Of x} 
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In these two pages from the site, the three-column layout packs in a lot of 
information without clutter. Note that the important, most current information 
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is presented in the center of the viewer’s attention. Icons highlight the featured 
items in the right column. Consistent navigation choices and the company’s iden- 
tifying logo are at the top of the page, while the left column holds secondary-level 
links. The use of white space between the columns organizes the page and keeps 
it from looking confusing. Although both sites use a three-column layout, the Tips 
& Techniques header on the secondary page breaks across the two-column grid 
to vary the design. 


DESIGN FOR THE USER 


FIGURE 2-16 
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Keep your design efforts centered solely around your user. Knowing your audi- 
ence answers almost all design questions—if it serves the audience, keep it; if 
it is potentially distracting or annoying, eliminate it. Find out what users expect 
from your site. If you can, survey them with an online form. Create a profile of 
your average user by compiling responses to basic questions. What do users 
want when they get to your site? Are they trying to find customer support and 
troubleshooting help, or do they want to buy something? Do they want to read 
articles or search for information? Once you know what your users want from 
your site, you can evaluate how the design reflects the audience profile. 
Compare the main pages from the following sites and consider their target 
audiences. E! online (Figure 2-16) is an entertainment news site. The four-column 
main page contains competing content that draws the user’s eye, such as anima- 
tions, a Java text scroll, bright colors, and familiar shapes. The overall effect is 
decidedly similar to television—familiar territory for E! online’s audience. 
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FIGURE 2-17 
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Pen & Ink’s Web site (Figure 2-17) projects a strong smell of printer’s ink. 
Other than the black and white photo, the main page components are textual. 
The prominent logo features a text element—the ampersand. Strong contrast- 
ing colors highlight the links. The layout evokes quill pens and lead type, which 
is exactly what the literary-minded user would like in an online journal. 
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These two examples demonstrate how the design suits the audience’s visual 
expectations, which is the look of the site. But you also should consider the 
ways in which users interact with the content, which is the feel of the site. 


DESIGN FOR INTERACTION 

Think about how the user wants to interact with the information on your Web 
page. Design for your content type, and decide if the user will read or scan 
your pages. 

For example, suppose your page is a collection of links, such as a main 
page or section page. Users want to interact with these types of pages by scan- 
ning the content, scrolling if necessary, pointing to graphics to see if they are 
hyperlinked, and clicking linked text. Design for this type of user interaction 
by using meaningful column headings, linked text, and short descriptions. 
Organize links into related topic groups and separate groupings with white 
space, graphics, or background color. 

Suppose the page is an article that contains large blocks of text. Your user 
is accustomed to interacting with pages of text by scrolling and possibly click- 
ing hyperlinked words of interest. The links may be in the body of the article 
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or contained in a sidebar. Design your pages for this type of content by keep- 
ing paragraphs short for online consumption. Make reading easier by using a 
text column that is narrower than the width of the screen. Keep your text leg- 
ible by providing enough contrast between foreground and background colors. 
Provide links that allow the user to jump quickly to related content. 

Two screens from the WebMonkey site illustrate the read/scan concept. 
Figure 2-18 shows a page designed for scanning. Users will look through a vari- 
ety of links to find a topic of interest. Once they choose a link, they jump to a 
page designed for reading, as illustrated in Figure 2-19. Note in both pages the 
user location identifier. This simple path statement lets the user quickly see 
their place in the hierarchy of information. 
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DESIGN FOR LOCATION 

It is difficult to predict the user’s exact viewing path. There is, however, general 
agreement on the relative areas of screen importance. Figure 2-20 depicts the 
sections of screen real estate ranked in order of importance. 
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FIGURE 2-19 = Webmonkey: html: teachingtool - Netscape 
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HTML is the lingua franca of the Net. It's a simple, universal mark-up 
language that allows Web publishers to create complex pages of text 
and images that can be viewed by anyone else on the Web, regardless 
g of what kind of computer or browser is being used. 

Consistent 
navigation Despite what you might have heard, you dont need any special 
software to create an HTML page; all you need is a word processor 
(such as SimpleText, BBEdit, or Microsoft Word) and a working 
knowledge of HTML. And lucky for all of us, basic HTML is dead easy. 


HTML is just a series of tags that are integrated into a text document. M| 


FIGURE 2-20 
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FIGURE 2-21 


Areas of screen 
importance applied to 
Adobe Web site 


During page design, rank the information you want to display, and then 
position the most important in the middle of the window, the next most impor- 
tant across the top, and so on, with the least important or static information in 
the left margin. For example, Figure 2-21 shows the Adobe main page with the 
areas of importance overlaying the content. 
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Note that the most important and current information is displayed in area 1. 
The company logo and main navigation banner are displayed in area 2. Featured 
stories that change often are placed in area 3. Reading content is in area 4. Area 5 
is used for links that appear consistently, but are of secondary importance. When 
planning your page layout, think location. The positioning of your content defines 
its importance to the user. 


GUIDE THE USER'S EYE 
The user can traverse a page in a variety of ways. Human engineering studies 
show a wide range of results when tracking user’s eye movements. As you plan 
your design to guide the user’s eye, consider the following two examples of 
online reading habits. 

As a function of normal reading habits, the user’s eye may move from left 
to right and back again, as in Figure 2-22. 

Figure 2-23 shows this viewing pattern applied to the Pen & Ink Web site. 
Because this Web site is designed for users who are most comfortable with 
paper-based information, the page encourages a paper-based reading pattern. 


FIGURE 2-22 


Paper-based reading 
pattern 


FIGURE 2-23 

Using the paper-based 
reading pattern to view 
a Web site 
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In contrast, when viewing landscape-based displays, such as televisions, the 
user may scan information following a clockwise pattern, as shown in Figure 2-24. 
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FIGURE 2-24 


Screen-based viewing 
pattern 
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Figure 2-25 shows this viewing style overlaying the E! online Web site. As 
the user’s eyes sweep over the page, they can take in most of the main content. 
Because this site is designed for users who are most accustomed to screen- 
based information, the page encourages a screen-based viewing pattern. 
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FIGURE 2-26 


Graphical view of a 
Web site's information 
structure 


Click to go to 
the page 


Users can also 
search the site 
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Knowing these common user habits can help you decide where to focus the 
user’s attention by object placement, text weight, and color use. Think about 
your grid structure and how you want to break out of it to attract attention. Use 
text weight and size to communicate relative importance of information. Break 
sections up with rules or active white space. Use shapes and color to reinforce 
location or topic. Get to know your users, and consider the two sample viewing 
methods described above as you experiment with content placement based on 
the way these users will view the page. 


KEEP A FLAT HIERARCHY 
Do not make users navigate through too many layers of your Web site to find the 
information they want. Structure your Web site to include section or topic-level 
navigation pages so users quickly find their path. Provide prominent navigation 
cues that quickly take your user to the content they desire. For example, a stan- 
dard navigation bar, consistently placed on every page, reassures users that they 
will not get lost, and lets them move through the site with flexibility. 

Consider providing a site map that graphically displays a user’s location in 
your Web site. Figure 2-26 shows a site map from the Massachusetts Medical 
Society Web site. 
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This graphical view of the Web site shows all the individual pages and the 
section in which they reside. It also provides a text box where users can enter 
keywords to find related information. Users can click to go directly to a page, 
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FIGURE 2-27 


A visual metaphor for 
the site map 


Click a room to 
go to the page 


orient themselves to the site’s content, or search the site. This is a good exam- 
ple of a graphical site map that fills more than one type of user need. 

Figure 2-27 shows a clever site map from The Cybermom Dot Com Web site 
that reflects the target audience of the site. The site uses a house metaphor to 
organize content. The site map lets you click any room of the house to view 
that section of content. Text links provide brief descriptions and an alternate 
navigation method. 
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USE THE POWER OF HYPERTEXT LINKING 
Unlike paper-based authors, as a hypertext author you have the luxury of adding 
clickable text and images where necessary to guide users through your infor- 
mation. This powerful ability comes with a measure of responsibility. You make 
the decisions that determine how users move through your site and process 
information. Readers browsing through magazines can flip to any page in any 
order they desire. You can replicate this nonlinear reading method on your Web 
site with links that let users move from page to page or section to section. With 
thoughtful hypertext writing, you can engage readers in a whole new way. 
Many sites have separate columns of links and topics, but many do not pro- 
vide links within the text. This is a powerful hypertext feature that is not used 
enough. Weave your links into your prose to offer a variety of paths. Avoid the 
Click here syndrome, illustrated in Figure 2-28, which is the habit of creating a 
link that consists of the meaningless Click here phrase, rather than providing a 
helpful textual clue to the destination of the link. 


FIGURE 2-28 
Click here syndrome 
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Figure 2-29 shows a page from Arctic Dawn, The Journeys of Samuel 
Hearne. This is an online hypertext version of an explorer’s journal from the 
1700s. Note how the hypertext links are worked directly into the text. When 
users click a link, they move to another page of information; from that page 
they either can go back or move to another page of information, and so on. The 
abundant hypertext links allow users to create a view of the site’s information 
that is uniquely their own. 

Provide plenty of links to let the user get around quickly. Use links to let 
the user return to the navigation section of your page, to a site map, or to the 
main page. Do not make the user scroll through lengthy columns. Provide links 
that let users jump down the page, jump back to the top of the page, or that 
show a clear way back to higher levels of your content. 
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MMEDIATELY on our arrival on the South side of the lake, the scene was agreeably altered, from 
an entire jumble of rocks and hills (for such is all the land on the North side), to a fine level country, in 
which there was not a hill to be seen, or a stone to be found: so that such of my companions as had 
not brass kettles, loaded their sledges with stones from some of the last islands, to boil their victuals 
with in their birch-bark kettles, which will not admit of being exposed to the fire. They therefore 
heat stones and drop them into the water in the kettle to make it boil. 
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Provide a hypertext table of contents, as in Figure 2-30, that lets the users 
pick the exact topic they want to view. 


3 Table of Contents (Scrolls From the Dead Sea) - Netscape | {OF x] 


Hypertext table of File Edit View Go Communicator Help 
contents tracks the i Back Foward Reload Home Search Netscape Images Print Security Stop PN | 


users viewed pages SG” Bookmarks A Location: [http: //lcweb loc. gov/exhibits/seralls/toc. html >| Gal” What's Related 


e About this Exhibit 
© Introduction 
o The World ofthe Scrolls 
o The Dead Sea Region 
o Scrolls 
m The Psalms Scroll 
o Artifacts from the Qumran Site 
m Scroll Jar - Textiles - Leather Scroll Fastenings 
o Related Library of Congress Materials 
e The Qumran Community 
o The Late Second Temple Period 
o The Qumran Community 
o Scrolls 
m The Phylactery Scroll - The Community Rule Scroll - The Calendrical 
Document Scroll - The Torah Precepts Scroll 


o Artifacts from the Qumran Site 
m Phylacteries - Wood - Pottery - Basketry & Cordage - Leather - Stone - 


Coins 
E 


a Dalai d Tii nnmn E nnna ony Hae Pa 


ar E| Document: Done =| 3 


Hypertext link colors 
instantly show what 
pages have been visited 


FIGURE 2-31 


Glossary with plenty of 
navigation choices 


Jump to any letter 
in the glossary 


Alphabetical list 
repeated after each 
letter’s section 


Web Site Design Principles // 49 


The benefit of a hypertext table of contents is the color-coding that shows 
the users which pages they have visited. By default, links are blue when new; 
they change to purple after they have been visited. A hypertext table of contents 
instantly shows the users where they have been and where they have yet to go. 

Glossaries and other densely packed documents become much easier to 
navigate with the addition of hypertext. Figure 2-31 shows a hypertext glossary 
that provides plenty of navigation choices for the user. 
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Provide alternate methods of linking to accommodate a variety of users. 
It is generally a sound idea to duplicate image links with text links in case 
users have their images turned off in the browser, use a text-based browser, 
or if images fail to download. Providing meaningful ALT attribute values in the 
<IMG> tag also can provide the necessary navigation information if images 
do not display. (See Chapter 5 for more information about including ALT 
attribute values in the <IMG> tag.) Figure 2-32 shows a Web page that has 
meaningful ALT values for every image. If the images do not appear, the user 
still can navigate the site. 
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FIGURE 2-32 
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HOW MUCH CONTENT IS ENOUGH? 

You only can crowd so much information onto any one Web page. Be conscious 
of the cognitive load of the user, who often thinks that Web pages hold too much 
information. America Online’s Web site (Figure 2-33) offers a dizzying array of 
Web resources. 
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FIGURE 2-34 


So much content, so 
little time... 
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Designed as a scanning page, the user may spend a few seconds looking for 
a particular topic before moving on by selecting a link. Similarly, the About.com 
Web site (Figure 2-34) squeezes in a large amount of varied information in a 


small space. 
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Resist the temptation to overload the user with too much information. 
Provide enough clues to let them find the content they want, and use links to 
divide content between pages. 


DESIGN FOR THE SCREEN 


The computer display, the destination for your Web pages, is very different from 
print-based media. You must take the following differences into account when 
planning your Web site: 
e The shape of a computer screen. Although most paper-based media are 
portrait-oriented, the computer screen is landscape oriented—that is, 
wider than it is tall. Your page design must reflect the space within which 
it will be displayed and read. 
e While a piece of paper reflects light, a computer screen has light passing 
through it from behind.This changes the nature of the colors and contrasts 
you choose to employ. Design pages that provide enough contrast for the 
user to read, but not so much that the colors distract from the content 
easily. Avoid light text on a light background and dark text on dark back- 
grounds. For example, the Media Center Web site, illustrated in Figure 2-35, 
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FIGURE 2-35 
Hard-to-read links on a 
dark background 
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uses blue links on a black background, making the links illegible. Also, the 
content does not fit the browser at 640 x 480 resolution. 
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e Computer screens use a much lower resolution than the printed page. 
Graphics and text that would look fine on a laser printer at 600 dpi are 
coarse and grainy at 72 dpi, the typical resolution for a computer moni- 
tor. Because of the screen graininess, italic text is especially hard to read 
in paragraph format, as illustrated in Figure 2-36. 


A SCREEN IS NOT A PAGE 


Although tempting, it often is a poor choice to take documents that are for- 
matted for print and post them online without considering the destination 


medium. In most cases, a document that is perfectly legible on paper is hard to 


negotiate online. The text length, font, and content length will not transfer suc- 
cessfully to the computer screen. Figures 2-37 and 2-38 show the same section 
of text from Lewis Carroll’s Alice in Wonderland. Figure 2-37 is formatted as if 


it were a page from a book. 
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Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam 
erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci 
tution ullamcorper suscipit lobortis nisi ut aliquip ex ea commodo 
consequat Duis te feugifacilisi. Duis autem dolor in hendrerit in 
vulputate velit esse molestie consequat, vel illum dolore eu feugiat 
nulla facilisis at vero eros et accumsan et iusto odio dignissim qui 
blandit praesent luptatum zzril delenit au gue duis dolore te feugat 
nulla facilisi. Ut wisi enim ad minim veniam, quis nostrud exerci taion 
ullamcorper suscipit lobortis nisl ut aliquip ex en commodo 
consequat. 
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FIGURE 2-37 3 Alice's Adventures in Wonderland - Netscape 
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that Alice had not a moment to think about stopping herself before she found herself falling down a very 
Dense full-screen deep well. 


text 


z a 

what she was ‘coming to, but it was too dere to see anything; then she looked at the sides of the well, and 
noticed that they were filled with cupboards and book-shelves: here and there she saw maps and pictures 
hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled "ORANGE 
MARMALADE," but to her great disappointment it was empty: she did not like to drop the jar for fear of 
killing somebody, 


User must scroll 


from left to right Text width does 


so managed to put it into one of the cupboards as she fell past it. not fit at 640 x 480 


"Well!" thought Alice to herself. "After such a fall as this, I shall think nothing of tumbling downstairs! 
How brave they'll all think me at home! Why, I wouldn't say anything about it, even if Mell off the top of 
the house!" (Which was very likely true.) 
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Note that the text is dense and fills the screen in large gray blocks. Because 
the text does not fit in the screen at 640 x 480 screen resolution, the user must 
scroll from left to right to read an entire line. In contrast, Figure 2-38 shows text 
that has been designed for online display. 
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She took down a jar from one of the shelves as she 
passed; it was labelled ‘ORANGE MARMALADE', 
but to her great disappointment it was empty: she did 
not like to drop the jar for fear of killing somebody, so 
managed to put it into one of the cupboards as she fell 
past it. 


“Welll' thought Alice to herself, ‘after such a fall as this, 
T shall think nothing of tumbling down stairs! How brave 
they'll all think me at home! Why, I wouldn't say 
anything about it, even if I fell off the top of the house!’ 
(Which was very likely true.) 
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Down, down, down. Would the fall never come to an 
end! `I wonder how many miles I've fallen by this time?’ 
she said aloud. ‘I must be getting somewhere near the 
{Document Done 
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The text width is short and easy to read without horizontal scrolling. The 
white space creates a text column that enforces the vertical flow of the page. 
The illustrations break up the text and relieve the user’s eye. The differences 
between these two pages show that text must be prepared thoughtfully for 
online display. 


SUMMARY & REVIEW 


Web sites have a wide variety of looks. It is easy to see why so many Web designers get 
caught up in the medium and forget their message. The lure of technology makes it easy to 
forget that you still are trying to communicate with words and pictures, just as humans have 
for centuries. Adapting those elements to online display for effective communication is the 
challenge. 

Plan a site that stands out and delivers its message. If you stick with the principles you 
learned in this chapter, you will be able to present information that is both accessible and 
engaging. 

e Design specifically for the computer medium, considering how the page layout, fonts, 


and colors you use will appear on the screen. 
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Craft an appropriate look and feel and stick with it throughout your site. Test and 
revise your interface by paying close attention to the demands of online display. 
Make your design portable by testing in a variety of browsers, operating systems, and 
computing platforms, and use as low a bandwidth as possible. 

Plan for easy access to your information. Provide logical navigation tools, and do 
not make the user click through more than two or three pages before they get what 
they want. 

Design a unified look for your site. Strive for smooth transitions from one page to the 
next. Create templates for your grid structure and apply them consistently. 

Use active white space as an integral part of your design. Use text, color, and object 
placement to guide the user's eye. 

Know your audience and design pages that suit their needs, interests, and viewing 
preferences. 

Leverage the power of hypertext linking. Provide enough links for the users to create 
their own path through your information. 

Design your text for online display, considering the differences between the screen 
and the page. 


REVIEW QUESTIONS 
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What is another name for the interface the user must navigate in a Web site? 
What is a common mistake Web designers make when testing their site? 
What is a prime reason users may leave a Web site? 

What is the single most important factor in determining the success of a Web site? 
What important factor degrades the legibility of your information? 

Name three ways to create a unified look for your site. 

How does a grid layout enhance Web design? 

Which HTML elements can you use to create a visual grid? 

Explain active vs. passive white space. 

List three ways to create a smooth transition between pages of a Web site. 
List two benefits of consistently placing navigation tools. 

Describe the difference between reading and scanning a page. 

Name three ways to focus a user's attention. 

Describe why using Click here as link text is ineffective. 

Describe the benefits of textual linking. 

Describe the benefits of a hypertext table of contents. 

Why is the ALT attribute so important to navigation? 

Name three differences between paper-based and screen-based design. 
Describe a good strategy to format text for online display. 
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1. Browse the Web for examples of good Web design. 
a. Using a screen capture program, capture screens that show two levels of informa- 
tion from the Web site. 
b. Indicate with screen callouts the unifying characteristics of the pages. 
c. Indicate the areas of active white space and passive white space. 
2. Browse the Web for examples of poor Web design. 
a. Using a screen capture program, capture screens that show two levels of informa- 
tion from the Web site. 
b. Indicate with screen callouts the jarring or distracting inconsistencies of the site. 
c. Make recommendations for improving the site design. 
3. Write a short essay critiquing a Web site's design. Describe the structural layout of the 
site and determine whether information is presented clearly and is easily accessible. 
4. Browse the Web for sites that use unique navigation methods. Write a short essay 
describing why the navigation is or is not successful. 
5. Find a Web site that you think needs improvements in its design. 
a. Print two pages from the site. 
b. Make copies of the originals, and set the originals aside. 
c. Using scissors, cut out the main elements of each page. Rearrange the elements 
and paste them in a design you feel improves the site. 
d. Compare and contrast the original to your improved design. 


Visualize the page design for your site by sketching a number of page layouts for different 
information levels of the site. For example, sketch the main page, a secondary page, and a 
content page. You do not have to be concerned with the exact look of the elements, but be 
prepared to indicate the main components of the pages, such as headings, navigation cues, 
link sets, text areas, and so on. 

Start to organize your site. Create a visual diagram that indicates the main page, sec- 
tion pages, content pages, etc. Indicate the links between the pages. Indicate whether you 
will provide alternate navigation choices such as a table of contents and site map. 


